define(function(){

    class Cart{
        constructor(ops){
            this.tbody = ops.tbody;
            this.url = ops.url;
            // 接收主模块传入的回调函数
            // 在回调函数中执行了计算总价，总数量，全选功能
            this.computed = ops.computed;

            this.load()
            this.addEvent()
        }
        load(){
            $.ajax({
                url:this.url
            }).then(data=>{
                this.data = JSON.parse(data)
                this.render()
            })
        }
        render(){
            this.localData = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];
            if(this.localData.length< 1) return;
            let str = "";
            this.data.forEach(val1 => {
                this.localData.forEach(val2=>{
                    if(val1.proId === val2.id){
                        str += `<tr index="${val2.id}">
                                <td><input class="sel" type="checkbox" ${val2.flag ? "checked" : ""}></td>
                                <td><img src="${val1.proImg}" alt=""></td>
                                <td>${val1.proName}</td>
                                <td><input class="set" type="number" min="1" value="${val2.num}"></td>
                                <td>${val1.price}</td>
                                <td>${val2.num*val1.price}</td>
                                <td class="del">删除</td>
                            </tr>`
                    }
                })
            });
            this.tbody.html(str);

            // 渲染页面之后，第一次执行回调函数
            this.computed();
        }
        addEvent(){
            const that = this;
            this.tbody.on("click",".del",function(){
                that.id = this.parentNode.getAttribute("index")
                this.parentNode.remove()
                that.setData(i=>that.localData.splice(i, 1));
            })
            this.tbody.on("input",".set",function(){
                that.id = this.parentNode.parentNode.getAttribute("index")
                that.setData(i=>that.localData[i].num=this.value)
            })
            this.tbody.on("change",".sel",function(){
                that.id = this.parentNode.parentNode.getAttribute("index")
                that.setData((i)=>{
                    that.localData[i].flag = this.checked
                })
            })
            // 全选复选框的改变事件
            $(".sumFlag").on("change",function(){
                // 当前选中状态
                // console.log(this.checked)
                // 获取其他单个复选框
                // console.log($(".sel"))
                // 遍历所有复选框
                $.each($(".sel"), (idx,val)=>{
                    // 设置选中状态为，全选的相同状态
                    val.checked = this.checked
                    // 修改所有数据的选中状态
                    that.setAllDataFlag(this.checked)
                });
            })
        }
        setAllDataFlag(f){
            this.localData.forEach(val=>{
                val.flag = f
            })
            // 同步到本地存储
            localStorage.setItem("proData", JSON.stringify(this.localData))
        }
        setData(cb){
            let i = 0;
            this.localData.some((val,idx)=>{
                i = idx;
                return val.id === this.id
            })
            cb(i)
            localStorage.setItem("proData", JSON.stringify(this.localData))
            // 每次修改数据之后，执行回调函数
            this.computed();
        }
        getData(){
            return this.localData;
        }
    }

    return Cart;
})